<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
              v-model="searchQuery.beginSearchTime"
              format="yyyy-MM-dd HH:mm"
              placeholder="开始时间" type="datetime"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchQuery.endSearchTime"
              format="yyyy-MM-dd HH:mm"
              placeholder="结束时间" type="datetime"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-select v-model="searchQuery.siteId" placeholder="提车网点" clearable filterable>-->
          <!--              <el-option v-for="item in siteArray" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-button plain size="small" type="primary" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button :disabled="additional" size="mini" @click="addFee">额外费用</el-button>
      </div>
    </div>
    <div id="lineImg" class="box-style">
      <div class="top">
        <ad-table v-loading="waitInitLoading" :data="waitList" :data-changes-scroll-top="waitIsScrollTop"
                  :height="drawer === true ? tableHeight-300 :tableHeight"
                  :searchQuery="waitSearchQuery" u-table
                  @search="waitGetInitList" @sort-change="waitSortInitList" @table-body-scroll="waitGetMoreList"
                  @filter-change="waitFilterInitList" @cell-click="cellClick">
          <ad-table-column ctype="index" fixed label="序号" type="index"/>
          <ad-table-column ctype="orderNo" label="订单号" prop="orderSubNo" searchable>
            <!--                                    <template slot-scope="scope">-->
            <!--                                      <el-input size="mini" v-model="scope.row.orderSubNo"></el-input>-->
            <!--                                    </template>-->
          </ad-table-column>
          <ad-table-column label="运单号" prop="transportNo" searchable/>
          <ad-table-column label="制单人" prop="orderCreateUserName" searchable sortable >
            <template slot-scope="{row}">
              <div style="display:flex;">
                <div>
                  {{ row.orderCreateUserName }}
                </div>
                <div v-if="row.orderRemark !== ''">
                  <el-tooltip  :content="row.orderRemark" placement="right">
                    <span>⚠️</span>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </ad-table-column>
          <ad-table-column ctype="datetime" label="制单时间" prop="orderCreateTime" sortable width="130"/>
          <ad-table-column label="发运人" prop="transportUserName" searchable sortable w="3c2f"/>
          <ad-table-column ctype="datetime" label="发运时间" prop="transportTime" sortable width="130"/>
          <ad-table-column dictName="sign_status" filterable label="签收状态" prop="signStatus" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.signStatus == 1" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{ parseStatus(dict, 'sign_status', row.signStatus) }}
                  </span></div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'sign_status', row.signStatus) }}</slot>
            </template>
          </ad-table-column>
          <ad-table-column dictName="takecar_status" filterable label="送车状态" prop="takeCarStatus" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.takeCarStatus == 1 || row.takeCarStatus==2" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{ parseStatus(dict, 'takecar_status', row.takeCarStatus) }}</span>
                  <i v-show="row.isAddTake" class="el-icon-check"></i></div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'takecar_status', row.takeCarStatus) }}</slot>
            </template>
          </ad-table-column>
          <ad-table-column dictName="pick_driver_status" filterable label="司机状态" prop="driverStatus" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.driverStatus == 1" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{
                      parseStatus(dict,
                        'pick_driver_status', row.driverStatus)
                    }}
                  </span></div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'pick_driver_status', row.driverStatus) }}</slot>
            </template>
          </ad-table-column>
          <ad-table-column dictName="finish_status" filterable label="交付状态" prop="finishStatus"
                           show-overflow-tooltip="true" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.finishStatus == 1" :row="row">
                <div class="tdFloat">
                  <span class="el-link--iner">{{ parseStatus(dict, 'finish_status', row.finishStatus) }}</span>
                  <i v-show="row.isAdd" class="el-icon-check"></i>
                </div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'finish_status', row.finishStatus) }}</slot>
            </template>
          </ad-table-column>
          <ad-table-column ctype="city" label="出发地" prop="startCode" queryPro="startName" searchable w="3c2f"/>
          <ad-table-column ctype="city" label="目的地" prop="destinationCode" queryPro="destinationName" searchable
                           w="3c2f"/>
          <ad-table-column label="大板司机" prop="transportDriverName" searchable w="4c2f"/>
          <ad-table-column label="车辆名称" prop="carName" searchable w="4c2f"/>
          <ad-table-column ctype="vin-2f" label="车架号" prop="vin" searchable/>
          <ad-table-column label="收货人" prop="consigneeName" searchable w="3c2f"/>
          <ad-table-column ctype="phone-2f" label="联系电话" prop="consigneePhone" searchable/>
          <ad-table-column label="到付金额" prop="deliveryPayFee" sortable w="3c2f"/>
          <!--          <ad-table-column label="承运费用" prop="transportCost" w="3c2f" sortable/>-->
          <ad-table-column label="送车指派人" prop="createUserName" searchable w="3c2f"/>
          <ad-table-column ctype="address-2f" label="送车地址" prop="takeAddress" searchable/>
          <ad-table-column dictName="takecar_type" filterable label="送车方式" prop="takeType" w="4c2f"/>
          <ad-table-column filterable label="送车司机" prop="takeDriverName" w="4c2f"/>
          <ad-table-column dictName="transport_way" filterable label="运输方式" prop="transportType" w="4c1f"/>
          <ad-table-column label="结算人" prop="settlementName" searchable w="3c2f"/>
          <ad-table-column dictName="settlement_type" filterable label="结算方式" prop="settlementType" w="4c2f"/>
          <ad-table-column ctype="phone-2f" label="结算电话" prop="settlementPhone" searchable/>
          <ad-table-column filterable label="送车费" prop="transportCost" w="3c2f"/>
          <ad-table-column ctype="remark" label="订单备注" prop="orderRemark"/>
        </ad-table>
      </div>


<!--      底部弹出框-->

      <div v-show="drawer" id="bottom" class="bottom" style="min-height: 290px">
        <div v-if="bottomTableData.length==0&&deliverTableData.length==0&&!isInspect" class="title-bar"
             style="height:36px;">
          <el-button style="position: absolute;right: 20px" size="mini" type="info" plain @click="drawer = false">取消</el-button>
        </div>
        <div v-if="bottomTableData.length==0&&deliverTableData.length==0&&!isInspect"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <div v-else-if="bottomTableData.length>0">
          <div class="title-bar">
            <h2>送车指派</h2>
            <div class="op">
              <el-button plain size="mini" type="danger" @click="goBackB">回退</el-button>
              <el-button size="mini" type="info" plain @click="drawer = false">取消</el-button>
              <el-button plain size="mini" type="primary" @click="generateDeliveryNote">生成送车单</el-button>
              <el-button plain size="mini" type="primary" @click="save">保存</el-button>
            </div>
          </div>
          <div class="content">
            <div class="left" style="min-width: 340px">
              <div class="form-wrapper assign">
                <h3>结算信息</h3>
                <div class="form-content">
                  <el-form ref="saveForm" :model="saveForm" :rules="rules" inline label-position="right"
                           label-width="auto" size="mini">
                    <el-row>
                      <el-col>
                        <el-form-item label="公司名称：" prop="company">
                          <el-input v-model="saveForm.company" :disabled="dialogSettlerVisible" @focus="showGetList"/>
                          <!--                          <ad-suggestion  v-model="saveForm.company" defaultProp="company" type="table"-->
                          <!--                                         @select="selectLink" @clear="removeLink"-->
                          <!--                                         :api="{method: getSuggestCompanyList, query: 'companyName'}"-->
                          <!--                                         :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>-->
                        </el-form-item>

                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="结算人：" prop="settlementName">
                          <el-input v-model="saveForm.settlementName" :disabled="dialogSettlerVisible"
                                    @focus="showGetList"/>
                          <!--                          <ad-suggestion v-model="saveForm.settlementName"-->
                          <!--                                         defaultProp="settlementName" type="table"-->
                          <!--                                         @select="selectLink" @clear="removeLink"-->
                          <!--                                         :api="{method: getSuggestCompanyList, query: 'linkmanName'}"-->
                          <!--                                         :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>-->

                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="联系电话：" prop="settlementPhone">
                          <el-input v-model="saveForm.settlementPhone" :disabled="dialogSettlerVisible"
                                    @focus="showGetList"/>
                          <!--                          <ad-suggestion v-model="saveForm.settlementPhone"-->
                          <!--                                         defaultProp="settlementPhone" type="table"-->
                          <!--                                         @select="selectLink" @clear="removeLink"-->
                          <!--                                         :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"-->
                          <!--                                         :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>-->
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col :span="11">
                        <el-form-item label="结算金额：" prop="takeCarFee">
                          <el-input v-model="saveForm.takeCarFee" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="13">
                        <el-form-item label="结算方式：" prop="settlementType">
                          <ad-status-select v-model="saveForm.settlementType" :dict="dict.settlement_type"/>

                          <!--                          <el-select v-model="saveForm.settlementType" clearable >-->
                          <!--                            <el-option v-for="type in dict['settlement_type']" :key="type.id" :label="type.label"-->
                          <!--                                       :value="type.value"/>-->
                          <!--                          </el-select>-->
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="middle" style="width: 234px; flex-shrink: 0;height:calc(36vh - 37px)">
              <div class="form-wrapper driver">
                <h3>司机信息</h3>
                <div class="form-content">
                  <el-form inline label-position="right" label-width="auto" size="mini">
                    <el-row>
                      <el-col>
                        <el-form-item label="司机姓名：">
                          <el-input v-model="saveForm.driverName" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label="司机电话：">
                          <el-input v-model="saveForm.driverPhone" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label="小板车牌：">
                          <el-input v-model="saveForm.licensePlateNumber" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label="身份证号：">
                          <el-input v-model="saveForm.driverCardNumber" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="right">
              <ad-table :data="bottomTableData" :height="bottomTabHeight" class="editTable" u-table>
                <ad-table-column v-if="!isShowDriver" :operates="operates" operation width="60"/>
                <ad-table-column ctype="orderNo" label="送车费" prop="takeCarFee" width="110">
                  <template slot-scope="{row}">
                    <slot :row="row">
                      <el-input v-model="row.takeCarFee" maxLength="5" placeholder="请输入"
                                size="mini"
                                style="width: 80px"
                                @blur="clacFee()"></el-input>
                    </slot>
                  </template>
                  <!--                  <template slot-scope="scope">-->
                  <!--                    <el-input size="mini" v-model="scope.row.takeCarFee" maxLength="8"></el-input>-->
                  <!--                  </template>-->
                </ad-table-column>
                <ad-table-column label="订单号" prop="orderSubNo"/>

                <ad-table-column ctype="city" label="出发地" prop="startCode"/>
                <ad-table-column ctype="city" label="目的地" prop="destinationCode"/>
                <ad-table-column ctype="carName" label="车辆名称" prop="carName"/>
                <ad-table-column ctype="vin" label="车架号" prop="vin"/>
                <ad-table-column dictName="takecar_type" label="送车方式" prop="takeType" w="4c2f"/>
                <ad-table-column ctype="address-2f" label="送车地址" prop="takeAddress"/>
                <ad-table-column width="auto"/>
              </ad-table>
            </div>
          </div>
        </div>
        <div v-else-if="isInspect">
          <div class="title-bar">
            <h2>订单编号 : {{ orderSubNo }}</h2>
            <el-button style="position: absolute;right: 85px;top: 5px" plain size="mini" type="danger" @click="goBack">回退</el-button>
            <el-button style="position: absolute;right: 15px;top: 5px" size="mini" type="info" plain @click="drawer = false">取消</el-button>
            <div class="op">
              <el-button v-if="!isInWarehouse" plain size="mini" type="primary" @click="saveInspect">保存</el-button>
            </div>
          </div>
          <div class="content">
            <div class="left" style="min-width: 440px">
              <div class="form-wrapper assign" style="position: relative">
                <h3>签收信息</h3>
                <div style="position: absolute;right:5px;top:3px;">
                  <el-button v-if="isInWarehouse" plain size="mini" type="primary" @click="inWarehouse">保存</el-button>
                </div>
                <el-descriptions :column="2" border size="mini">
                  <el-descriptions-item label="出发地">
                    <value :model="data" prop="startCode" style="display: inline-block;width:100px" type="city"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="目的地">
                    <value :model="data" prop="destinationCode" style="display: inline-block;width:100px" type="city"/>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2" label="车辆名称">
                    <value :model="data" prop="carName"/>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2" label="车架号">
                    <value :model="data" prop="vin"/>
                  </el-descriptions-item>
<!--                  <el-descriptions-item :span="2" label="签收类型">-->
<!--                    <ad-status-select-noclear v-model="signForm.needMoreTransport" :dict="dict.sign_type" size="mini"-->
<!--                                              style="margin: -5px 0;"></ad-status-select-noclear>-->
<!--                  </el-descriptions-item>-->
                  <el-descriptions-item :span="2" label="签收备注">
                    <el-input v-model="signForm.remark" maxLength="100" size="mini"
                              style="margin: -5px 0;"/>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div :style="{'border-left':'none','height':rightHeight}" class="right">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>验车信息</h3>
              </div>
              <div class="form-wrapper" style="width:100%;display: inline-block">
                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 61px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    外观及内饰验车照片
                  </div>
                </div>
                <div class="form-content lineForm"
                     style="margin-left: 130px;border-bottom: 1px #e3e3e3 solid;height:62px;overflow-y: hidden">
                  <div v-show="previewUrl.length==0" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="previewUrl.length>0" style="line-height: 16px;">
                    <!--                    <el-image v-for="url in previewUrl" :key="url" :src="url"-->
                    <!--                              style="width: 90px; height: 58px;margin-right: 10px;"-->
                    <!--                              :preview-src-list="previewUrl"></el-image>-->
                    <viewer :images="previewUrl">
                      <img v-for="(url,i) in previewUrl" :id="'img'+i" :key="url" :src="url"
                           :style="{'width': '90px', 'height': '58px','margin-right': '10px','display':i>5?'none':'inline'}">
                      <span v-if="previewUrl.length>6" class="imgsMore"
                            @click="viewerImg">更多</span>
                    </viewer>
                  </div>
                </div>
                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    车架/车牌号
                  </div>
                </div>
                <div
                  style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{ inspectForm.vin }}
                  </div>
                </div>
                <div
                  style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    公里数
                  </div>
                </div>
                <div
                  style="height: 31px;width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                    style="height: 31px;line-height: 31px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    {{ inspectForm.km||'-' }}
                  </div>
                </div>
                <div
                  style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车备注
                  </div>
                </div>
                <div
                  style="font-size: 12px;width: 100%;margin-left: 730px">
                  <div
                    style="height:30px;line-height: 35px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{ inspectForm.remark ? inspectForm.remark : '-' }}
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
        <div v-else-if="deliverTableData.length>0">
          <div class="title-bar">
            <h2>签收交付</h2>
            <div class="op">
              <el-button  size="mini" type="danger" plain  @click="goBackA">回退</el-button>
              <el-button  size="mini" type="info" plain @click="drawer = false">取消</el-button>
              <el-button plain size="mini" type="primary" @click="deliveryOrder">生成交付单</el-button>
              <el-button v-if="deliverForm.type != 1" plain size="mini" type="primary" @click="deliverSave(false)">保存
              </el-button>
            </div>
          </div>
          <div class="content">
            <div class="left" style="width: 400px">
              <div class="form-wrapper assign">
                <h3 style="height: 34px;">交付信息</h3>
                <div :style="{'display': 'inline-block','height':leftHeight,'overflow-x':'hidden','overflow-y':'auto'}"
                     class="scroll-y">
                  <el-descriptions :column="2" border size="mini">
                    <el-descriptions-item label="收车人员">
                      <value :model="deliverForm" prop="consigneeName" style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话">
                      <value :model="deliverForm" prop="consigneePhone" style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="交付凭证">
                      <ad-upload v-model="deliverForm.takeCarImageList" multiple style="margin: -4px 0"/>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="交付备注">
                      <el-input v-model="deliverForm.remark" maxLength="100" size="mini"
                                style="margin: -5px 0;"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="到付金额">
                      <!--                      <el-input style="margin: -5px 0;width: 100px" size="mini" v-model="deliverForm.deliveryPayFee"-->
                      <!--                                disabled/>-->
                      <div v-if="deliverForm.deliveryPayFee" style="color: red;font-size: 14px;">
                        ￥{{ deliverForm.deliveryPayFee }}
                      </div>
                      <span v-else>-</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="支付方式">
                      <ad-status-select v-model="deliverForm.type" :dict="dict.delivery_payment_type" :disabled="!(Number(deliverForm.deliveryPayFee)>0)"
                                        size="mini"
                                        style="margin: -5px 0;width: 100px" @change="change_type"/>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="deliverForm.type==2" :span="2" label="转账凭证">
                      <ad-upload v-model="deliverForm.paymentImageList" multiple/>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="deliverForm.type==3" :span="2" label="支付金额">
                      <el-input-number v-model="deliverForm.cashFee" :controls="false" size="mini"
                                       style="margin: -5px 0;"/>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
            <div class="middle" style="flex-shrink: 0;">
              <ad-table id="editTable" :data="deliverTableData" :height="bottomTabHeight" class="editTable" u-table
                        @cell-click="cellClickBottom">
                <ad-table-column ctype="index" label="序号" type="index" width="50"/>
                <ad-table-column label="订单号" prop="orderSubNo" width="100"/>
                <ad-table-column ctype="carName" label="车辆名称" prop="carName" width="100"/>
                <ad-table-column ctype="vin" label="车架号" prop="vin"/>
                <ad-table-column :operates="deliverOperates" operation width="50"/>
              </ad-table>
            </div>
            <div :style="{'height':rightHeight}" class="right">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>验车信息</h3>
              </div>
              <div class="form-wrapper" style="width:100%;display: inline-block">
                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 61px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    外观及内饰验车照片
                  </div>
                </div>
                <div class="form-content lineForm"
                     style="margin-left: 130px;border-bottom: 1px #e3e3e3 solid;height:62px;overflow-y: hidden">
                  <div v-show="deliverInfoUrl.length==0" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="deliverInfoUrl.length>0" style="line-height: 12px">
                    <!--                    <el-image v-for="url in deliverInfoUrl" :key="url" :src="url"-->
                    <!--                              style="width: 90px; height: 58px;margin-right: 10px;"-->
                    <!--                              :preview-src-list="deliverInfoUrl"></el-image>-->
                    <viewer :images="deliverInfoUrl">
                      <img v-for="(url,i) in deliverInfoUrl" :id="'img_'+i" :key="url" :src="url"
                           :style="{'width': '90px', 'height': '58px','margin-right': '10px','display':i>3?'none':'inline'}">
                      <span v-if="deliverInfoUrl.length>4" class="imgsMore"
                            @click="viewerImg2">更多</span>
                    </viewer>
                  </div>
                </div>

                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    车架/车牌号
                  </div>
                </div>
                <div
                  style="width:110px;display: inline-block;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{ deliverInfo.vin }}
                  </div>
                </div>
                <div
                  style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    公里数
                  </div>
                </div>
                <div
                  style="width:90px;display: inline-block;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    {{ deliverInfo.km }}
                  </div>
                </div>
                <div
                  style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车备注
                  </div>
                </div>
                <div
                  style="font-size: 12px;width: calc(100% - 535px);margin-left: 530px">
                  <div :title="deliverInfo.remark"
                       style="height:30px;line-height: 30px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{ deliverInfo.remark ? deliverInfo.remark : '-' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



    </div>
    <!--添加、修改弹窗-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogVisible"
      class="customerFormDialog"
      title="额外费用"
      width="830px"
    >
      <outlay-manage :id="data.orderId" id="outlayManage" ref="outlayManage" :addScene="3"
                     :visible.sync="dialogVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="addFeeList">新 增</el-button>
              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找结算列表信息-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogSettlerVisible"
      class="customerFormDialog"
      title="选择结算人"
      width="730px"
    >
      <settler-manage :id="data.orderId" ref="settlerManage" :visible.sync="dialogSettlerVisible" @select="selectLink"/>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="addSettlerList">新 增</el-button>
              <el-button size="small" @click="dialogSettlerVisible = false">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找司机列表信息-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogDriverVisible"
      class="customerFormDialog"
      title="选择司机"
      width="850px"
    >
      <driver-manage :id="saveForm.companyId" ref="driverManage" :visible.sync="dialogDriverVisible"
                     @select="selectDriverLink"/>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="addDriverList">新 增</el-button>
              <el-button size="small" @click="dialogDriverVisible = false">取 消</el-button>
            </span>
    </el-dialog>
    <!--扫码-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogBayVisible"
      class="customerFormDialog"
      title="扫码支付"
      width="530px"
    >
      <div style="line-height: 20px;text-align: center;color: red;margin-bottom: 10px;">
        请用微信或者支付宝扫码下方二维码支付
      </div>
      <div style="line-height: 20px;text-align: center;color: red;margin-bottom: 20px;">
        到付金额：￥{{ deliverForm.deliveryPayFee }}
      </div>
      <div v-if="showMake" class="showMake">
        <div style="text-align: center;line-height: 500px;color: red;font-size: 24px">
          支付中...
        </div>
      </div>
      <div id="qrCode-wx" ref="qrCode-wx" style="margin-left: 75px"></div>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" @click="dialogBayVisible = false">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import AdSuggestion from '@/components/AdSuggestion'
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import adTable from '@/mixins/adTable'
import Value from '@/components/AdValue'
import api, { get as waitApiGetList } from '@/api/sign/wait'
import AdUpload from '@/components/AdUpload'
import noData from '@/assets/404_images/nodata.png'
import OutlayManage from './components/outlayManage'
import SettlerManage from '@/components/SettlerManage'
import DriverManage from '@/components/DriverManage'
import AdStatusSelect from '@/components/AdStatusSelect'
import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
import QRCode from 'qrcodejs2'
import {
  getCompanyList as getSuggestCompanyList
} from '@/api/suggestion'
import apiUser from '@/api/system/user'
import { parseStatus } from '@/utils/code'

export default {
  name: 'sign-sign-wait',
  components: {
    AdTable,
    AdTableColumn,
    AdSuggestion,
    Value,
    AdUpload,
    OutlayManage,
    AdStatusSelect,
    AdStatusSelectNoclear,
    SettlerManage,
    DriverManage
  },
  dicts: ['pick_driver_status', 'sign_status', 'takecar_status', 'finish_status', 'takecar_type', 'settlement_type', 'sign_type', 'delivery_payment_type', 'transport_way'],
  mixins: [adTable([
    { name: 'wait', pk: 'code' },
  ])],
  data () {
    return {
      drawer:false,
      noData,
      siteArray: [],
      additional: true,
      isInspect: false,
      isShowDriver: false,
      rightHeight: 'calc(36vh - 37px)',
      leftHeight: 'calc(36vh - 72px)',
      signForm: {
        orderId: null,
        transportId: null,
        needMoreTransport: null,
        remark: null,
      },
      deliverForm: {
        cashFee: undefined,//现金值
        deliveryPayFee: undefined,
        consigneeName: null,
        consigneePhone: null,
        type: null,
        remark: null,
        orderIdList: [],
        takeCarImageList: [], //交付凭证图
        paymentImageList: [],//支付凭证图
      },
      searchQuery: {
        beginSearchTime: null,
        endSearchTime: null,
        siteId: null
      },
      tableHeight: 440,
      bottomTabHeight: 300,
      topTableData: [
        { creator: '按不出', no: 'http:www.baidu.com' }
      ],
      bottomTableData: [],
      deliverTableData: [],
      saveForm: {
        company: '',
        companyId: null,
        takeCarFee: null,
        settlementId: null,
        settlementName: '',
        settlementPhone: '',
        settlementType: '',
        driverId: null,
        driverName: '',
        driverPhone: '',
        driverCardNumber: '',
        licensePlateNumber: ''
      },
      inspectForm: {
        specification: undefined,
        towHook: undefined,
        ashtray: undefined,
        toolkit: undefined,
        antenna: undefined,
        key: undefined,
        warningSign: undefined,
        licensePlateFrame: undefined,
        aidPacket: undefined,
        footPad: undefined,
        airPump: undefined,
        cigarLighter: undefined,
        spareTire: undefined,
        jack: undefined,
        bellCover: undefined,
        vin: undefined,
        km: undefined,
        remark: undefined,
      },
      deliverInfo: {
        specification: undefined,
        towHook: undefined,
        ashtray: undefined,
        toolkit: undefined,
        antenna: undefined,
        key: undefined,
        warningSign: undefined,
        licensePlateFrame: undefined,
        aidPacket: undefined,
        footPad: undefined,
        airPump: undefined,
        cigarLighter: undefined,
        spareTire: undefined,
        jack: undefined,
        bellCover: undefined,
        vin: undefined,
        km: undefined,
        remark: undefined,
      },
      rules: {
        // company: [
        //   {required: true, message: '必选', trigger: 'blur'},
        // ],
        // settlementName: [
        //   {required: true, message: '必选', trigger: 'blur'},
        // ],
        // settlementType: {required: true, message: '必选', trigger: 'blur'},
        // settlementPhone: [
        //   {required: true, message: '必选', trigger: 'blur'},
        // ]
      },
      inspectRules: {
        vin: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        km: [
          { required: true, message: '必填', trigger: 'blur' },
        ]
      },
      operates: {
        list: [
          {
            label: '移除',
            type: 'primary',
            icon: '',
            disabled: (index, row) => {
              return false
            },
            method: (index, row) => {
              this.del(row, index)
            }
          }
        ]
      },
      deliverOperates: {
        list: [
          {
            label: '移除',
            type: 'primary',
            icon: '',
            disabled: (index, row) => {
              return false
            },
            method: (index, row) => {
              this.delDeliver(row, index)
            }
          }
        ]
      },
      orderSubNo: '',
      data: {},
      scanQrcodePaySuccess: false,
      isInWarehouse: false,
      validateImages: [],
      images: [],
      previewUrl: [],
      deliverInfoUrl: [],
      dialogVisible: false,
      dialogSettlerVisible: false,
      dialogDriverVisible: false,
      dialogBayVisible: false,
      showMake: false,
    }
  },
  watch: {
    dialogBayVisible (newName) {
      let self = this
      if (!newName) {
        self.deliverForm.type = null
        document.getElementById('qrCode-wx').innerHTML = ''
      }
    }
  },
  created () {
    let self = this
    self.waitGetInitList()
    setTimeout(function () {
      // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145
      self.tableHeight = document.documentElement.clientHeight - 160
      // self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35
    })
    //获取网点信息
    this.getSiteList()

    if (this.detectZoom() == 100) {
      this.rightHeight = 'calc(36vh - 37px)'
      this.leftHeight = 'calc(36vh - 72px)'
    }
    if (this.detectZoom() == 125) {
      this.rightHeight = 'calc(36vh - 17px)'
      this.leftHeight = 'calc(36vh - 52px)'
    }
  },
  methods: {
    waitApiGetList, parseStatus, getSuggestCompanyList,
    viewerImg: function () {
      document.getElementById('img0').click()
    },
    viewerImg2: function () {
      document.getElementById('img_0').click()
    },
    detectZoom: function () {
      let ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = Math.round(ratio * 100)
      }
      return ratio
    },
    goBackA () {
      let self = this
      self.$confirm('是否确定回退?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.takeReTake(self.data.orderId).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '提示',
              message: '回退成功！',
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
          }
        })
      }).catch(() => {
      })
    },
      goBackB() {
      let self = this
      self.$confirm('是否确定回退?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.takeReTake(self.data.orderId).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '提示',
              message: '回退成功！',
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
          }
        })
      }).catch(() => {
      })
    },
    goBack () {
      let self = this
      self.$confirm('是否确定回退?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.returnTransport(self.data.orderId).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '提示',
              message: '回退成功！',
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
          }
        })
      }).catch(() => {
      })
    },
    //查询
    queryList: function () {
      let self = this
      self.bottomTableData = []
      self.deliverTableData = []
      self.isInspect = false
      self.additional = true
      self.clearDriverInfo()
      self.waitGetInitList()
    },
    getSiteList: function () {
      let self = this
      apiUser.getSiteList().then(res => {
        self.siteArray = res.data
      })
    },
    //改变支付方式
    change_type: function () {
      let self = this
      let timer = null
      let ids = []
      self.deliverTableData.forEach(d => {
        ids.push(d.orderId)
      })
      if (self.deliverForm.type == 1) {
        self.dialogBayVisible = true
        api.getPayQrcode(ids).then(res => {
          const clientSn = res.data.clientSn
          timer = setInterval(() => {
            api.getPayResult(clientSn).then(res => {
              // 0: 预下单生成二维码成功，1：扫码成功，2：支付完成，3：支付失败
              if (res.data.status == 1) {
                self.showMake = true
              } else if (res.data.status == 2) {
                clearInterval(timer)
                document.getElementById('qrCode-wx') && (document.getElementById('qrCode-wx').innerHTML = '')
                self.scanQrcodePaySuccess = true
                self.dialogBayVisible = false
                self.deliverSave(clientSn)
              } else {
                self.scanQrcodePaySuccess = false
              }
            })
          }, 3000)
          self.$nextTick(() => {
            new QRCode(self.$refs['qrCode-wx'], {
              text: res.data.qrcode,
              width: 350,
              height: 350,
              colorDark: '#333333', //二维码颜色
              colorLight: '#ffffff', //二维码背景色
              correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
            })
          })
        })
      } else {
        clearInterval(timer)
        document.getElementById('qrCode-wx') && (document.getElementById('qrCode-wx').innerHTML = '')
      }
    },
    cellClick (row, column, event) {
      let self = this
      self.drawer = true
      self.additional = false
      self.data = row._row ? row._row : row
      switch (column.property) {
        case 'takeCarStatus':
          if (row.isAddTake) {
            return
          }
          if (self.isShowDriver) {
            self.bottomTableData = []
          }
          self.isShowDriver = false
          if (row.takeCarStatus == 1 || row.takeCarStatus == 2) {
            self.clearDriverInfo()
            // if (self.isInspect) {
            //   self.$notify({
            //     title: '提示',
            //     message: '下方有未完成的操作，请先完成下方操作后在做此操作！',
            //     position: 'bottom-right',
            //     type: 'warning'
            //   });
            //   return
            // }
            self.deliverTableData.forEach(d => {
              self.waitList.forEach(_d => {
                if (_d.orderId == d.orderId) {
                  _d.isAdd = false
                }
              })
            })
            self.deliverTableData = []
            if (self.bottomTableData.length == 0) {
              self.clearFrom()
            }
            self.isInspect = false
            self.bottomTableData.push(row._row ? row._row : row)
            row.isAddTake = true
            // self.waitList.forEach((d, i) => {
            //   if (d.orderId == row.orderId) {
            //     self.waitList.splice(i, 1)
            //   }
            // })
          }
          break
        case 'driverStatus':
          if (row.driverStatus == 1) {
            self.clearDriverInfo()
            self.isInspect = false
            if (!self.isShowDriver) {
              if (self.bottomTableData.length > 0) {
                self.bottomTableData.forEach(d => {
                  self.waitList.forEach(_d => {
                    if (_d.orderId == d.orderId) {
                      _d.isAddTake = false
                    }
                  })
                })
              }
              if (self.deliverTableData.length > 0) {
                self.deliverTableData.forEach(d => {
                  self.waitList.forEach(_d => {
                    if (_d.orderId == d.orderId) {
                      _d.isAdd = false
                    }
                  })
                })
              }
            }
            self.isShowDriver = true
            self.deliverTableData = []
            self.bottomTableData = []
            self.clearFrom()
            self.bottomTableData.push(row._row ? row._row : row)
            self.saveForm.companyId = row.companyId
            self.saveForm.company = row.companyName
            self.saveForm.settlementName = row.settlementName
            self.saveForm.settlementId = row.settlementId
            self.saveForm.settlementPhone = row.settlementPhone
            self.saveForm.settlementType = row.settlementType
            self.saveForm.takeCarFee = row.takeCarFee
          }
          break
        //交付状态
        case 'finishStatus':
          console.log(row)
          if (row.isAdd) {
            return
          }
          if (self.isShowDriver) {
            self.deliverTableData = []
          }
          if (self.bottomTableData.length > 0) {
            self.bottomTableData.forEach(d => {
              self.waitList.forEach(_d => {
                if (_d.orderId == d.orderId) {
                  _d.isAddTake = false
                }
              })
            })
          }
          self.bottomTableData = []
          self.isShowDriver = false
          if (row.finishStatus == 1) {
            if (self.deliverTableData.length == 0) {
              self.clearFrom()
            }
            self.isInspect = false
            if (self.deliverTableData.length > 0) {
              if (row.consigneeName != self.deliverForm.consigneeName) {
                self.$notify({
                  title: '保存',
                  message: '请选择同一个收车人',
                  position: 'bottom-right',
                  type: 'warning'
                })
                return
              }
            }
            self.additional = true
            row.isAdd = true
            self.deliverTableData.push(row._row ? row._row : row)
            // self.waitList.forEach((d, i) => {
            //   if (d.orderId == row.orderId) {
            //     self.waitList.splice(i, 1)
            //   }
            // })
            self.deliverForm.consigneeName = row.consigneeName
            self.deliverForm.consigneePhone = row.consigneePhone
            //计算到付金额
            self.calcArriveFee()
          }
          break
        case 'signStatus':
          if (row.signStatus == 1) {
            self.isInWarehouse = true
            self.isInspect = true
            self.signForm.orderId = row.orderId
            self.signForm.transportId = row.transportId
            if (!self.isShowDriver && self.bottomTableData.length > 0) {
              self.bottomTableData.forEach(d => {
                self.waitList.forEach(_d => {
                  if (_d.orderId == d.orderId) {
                    _d.isAddTake = false
                  }
                })
              })
            }
            self.deliverTableData.forEach(d => {
              self.waitList.forEach(_d => {
                if (_d.orderId == d.orderId) {
                  _d.isAdd = false
                }
              })
            })
            self.deliverTableData = []
            self.bottomTableData = []
            self.clearFrom()
            self.clearDriverInfo()

            self.orderSubNo = row._row ? row._row.orderSubNo : row.orderSubNo
            self.images = []
            self.previewUrl = []
            api.gegGerifyData(row.orderId).then(res => {
              self.inspectForm.specification = res.data.specification
              self.inspectForm.towHook = res.data.towHook
              self.inspectForm.ashtray = res.data.ashtray
              self.inspectForm.toolkit = res.data.toolkit
              self.inspectForm.antenna = res.data.antenna
              self.inspectForm.key = res.data.key
              self.inspectForm.warningSign = res.data.warningSign
              self.inspectForm.licensePlateFrame = res.data.licensePlateFrame
              self.inspectForm.aidPacket = res.data.aidPacket
              self.inspectForm.footPad = res.data.footPad
              self.inspectForm.airPump = res.data.airPump
              self.inspectForm.cigarLighter = res.data.cigarLighter
              self.inspectForm.spareTire = res.data.spareTire
              self.inspectForm.jack = res.data.jack
              self.inspectForm.bellCover = res.data.bellCover
              self.inspectForm.vin = res.data.vin
              self.inspectForm.km = res.data.km
              self.inspectForm.remark = res.data.remark
              self.previewUrl = res.data.validateImages
              res.data.validateImages.forEach((d, i) => {
                self.images.push({
                  name: d,
                  url: d
                })
              })
              self.$refs.adimg.images = []
              self.$refs.adimg.images = self.images
            })
          }
          break
      }
    },
    cellClickBottom (row, column, event) {
      let self = this
      api.gegGerifyData(row.orderId).then(res => {
        self.deliverInfo.specification = res.data.specification
        self.deliverInfo.towHook = res.data.towHook
        self.deliverInfo.ashtray = res.data.ashtray
        self.deliverInfo.toolkit = res.data.toolkit
        self.deliverInfo.antenna = res.data.antenna
        self.deliverInfo.key = res.data.key
        self.deliverInfo.warningSign = res.data.warningSign
        self.deliverInfo.licensePlateFrame = res.data.licensePlateFrame
        self.deliverInfo.aidPacket = res.data.aidPacket
        self.deliverInfo.footPad = res.data.footPad
        self.deliverInfo.airPump = res.data.airPump
        self.deliverInfo.cigarLighter = res.data.cigarLighter
        self.deliverInfo.spareTire = res.data.spareTire
        self.deliverInfo.jack = res.data.jack
        self.deliverInfo.bellCover = res.data.bellCover
        self.deliverInfo.vin = res.data.vin
        self.deliverInfo.km = res.data.km
        self.deliverInfo.remark = res.data.remark
        self.deliverInfoUrl = res.data.validateImages
      })
    },
    //计算提车费用
    clacFee: function () {
      let self = this
      let takeCarFee = 0
      self.bottomTableData.forEach(d => {
        if (!isNaN(d.takeCarFee)) {
          takeCarFee = takeCarFee + Number(d.takeCarFee)
        }
      })
      self.saveForm.takeCarFee = takeCarFee
    },
    //计算到付金额
    calcArriveFee: function () {
      let self = this
      let deliveryPayFee = null
      self.deliverTableData.forEach(d => {
        if (!isNaN(d.deliveryPayFee)) {
          deliveryPayFee = deliveryPayFee + Number(d.deliveryPayFee)
        }
      })
      self.deliverForm.deliveryPayFee = deliveryPayFee
      console.log(deliveryPayFee)
      // if (Number(deliveryPayFee) > 0 && self.deliverForm.type == null) {
      //   self.deliverForm.type = 1;
      //   self.change_type();
      // }
    },
    //移除
    del: function (row, i) {
      console.log(row, i)
      let self = this
      row.takeCarFee = null
      self.waitList.forEach(d => {
        if (d.orderId == row.orderId) {
          d.isAddTake = false
        }
      })
      self.bottomTableData.forEach((d, i) => {
        if (d.orderId == row.orderId) {
          self.bottomTableData.splice(i, 1)
        }
      })
      self.clacFee()
    },
    delDeliver: function (row, i) {
      console.log(row, i)
      let self = this
      // self.waitList.unshift(row);
      self.waitList.forEach(d => {
        if (d.orderId == row.orderId) {
          d.isAdd = false
        }
      })
      self.deliverTableData.forEach((d, i) => {
        if (d.orderId == row.orderId) {
          self.deliverTableData.splice(i, 1)
        }
      })
      self.calcArriveFee()
      if (self.deliverTableData.length == 0) {
        self.deliverForm.type = null
      }
    },
    selectLink (link) {
      let self = this
      self.dialogSettlerVisible = false
      self.saveForm.companyId = link.companyId
      self.saveForm.company = link.companyName
      self.saveForm.settlementId = link.linkmanId
      self.saveForm.settlementName = link.linkmanName
      self.saveForm.settlementPhone = link.linkmanPhone

      self.saveForm.driverId = null
      self.saveForm.driverName = ''
      self.saveForm.driverPhone = ''
      self.saveForm.driverCardNumber = ''
      self.saveForm.licensePlateNumber = ''
    },
    //选怎司机
    selectDriverLink (link) {
      let self = this
      self.dialogDriverVisible = false
      self.saveForm.driverId = link.driverId ? link.driverId : null
      self.saveForm.driverName = link.driverName
      self.saveForm.driverPhone = link.phone
      self.saveForm.driverCardNumber = link.driverCardNumber
      self.saveForm.licensePlateNumber = link.licensePlateNumber
    },
    removeLink () {
      let self = this
      self.saveForm.companyId = ''
      self.saveForm.company = ''
      self.saveForm.settlementId = ''
      self.saveForm.settlementName = ''
      self.saveForm.settlementPhone = undefined
    },
    //清空
    clearFrom: function () {
      let self = this
      self.removeLink()
      self.signForm.needMoreTransport = null
      self.signForm.remark = null
      self.saveForm.takeCarFee = null
      self.saveForm.settlementType = null
      self.saveForm.driverName = ''
      self.saveForm.driverPhone = ''
      self.saveForm.driverCardNumber = ''
      self.saveForm.licensePlateNumber = ''
    },
    clearDriverInfo: function () {
      let self = this
      self.deliverInfo = {
        specification: undefined,
        towHook: undefined,
        ashtray: undefined,
        toolkit: undefined,
        antenna: undefined,
        key: undefined,
        warningSign: undefined,
        licensePlateFrame: undefined,
        aidPacket: undefined,
        footPad: undefined,
        airPump: undefined,
        cigarLighter: undefined,
        spareTire: undefined,
        jack: undefined,
        bellCover: undefined,
        vin: undefined,
        km: undefined,
        remark: undefined,
      }
      self.deliverInfoUrl = []
    },
    save () {
      let self = this
      let ajaxData = {}
      if (!self.isShowDriver) {
        if (self.saveForm.companyId == null || self.saveForm.settlementId == null || self.saveForm.settlementPhone == '' || self.saveForm.settlementType == '' || self.saveForm.settlementType == null) {
          self.$notify({
            title: '提示',
            message: '请填写公司名称，结算人，联系电话以及结算方式！',
            position: 'bottom-right',
            type: 'warning'
          })
          return
        }
        self.$refs.saveForm.validate((valid) => {
          if (valid) {
            self.$confirm('是否确定保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(self.bottomTableData, self.saveForm)
              ajaxData = { ...self.saveForm }
              ajaxData.takeOrderVOList = []
              self.bottomTableData.forEach(d => {
                ajaxData.takeOrderVOList.push(
                  {
                    orderId: d.orderId,
                    cost: d.takeCarFee
                  }
                )
              })
              api.savePick(ajaxData).then(res => {
                if (res.code == 0) {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'success'
                  })
                  self.queryList()
                  self.clearFrom()
                  self.bottomTableData = []
                } else {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'error'
                  })
                }
              })
            }).catch(() => {
            })
          } else {
            return
          }
        })
      } else {
        if (self.saveForm.driverName == '' || self.saveForm.driverPhone == '' || self.saveForm.driverCardNumber == '') {
          self.$notify({
            title: '提示',
            message: '请填写司机姓名电话和身份证号码！',
            position: 'bottom-right',
            type: 'warning'
          })
          return
        } else {
          self.$confirm('是否确定保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            ajaxData = { ...self.saveForm }
            self.bottomTableData.forEach(d => {
              ajaxData.orderId = d.orderId
              ajaxData.takeCarFee = d.takeCarFee
            })
            api.updataPick(ajaxData).then(res => {
              if (res.code == 0) {
                self.$notify({
                  title: '保存',
                  message: res.msg,
                  position: 'bottom-right',
                  type: 'success'
                })
                self.queryList()
                self.clearFrom()
                self.bottomTableData = []
              } else {
                self.$notify({
                  title: '保存',
                  message: res.msg,
                  position: 'bottom-right',
                  type: 'error'
                })
              }
            })
          }).catch(() => {
          })

        }
      }
    },
    //验车保存
    saveInspect () {
      let self = this
      if (self.inspectForm.vin == null || self.inspectForm.km == null) {
        self.$notify({
          title: '保存',
          message: '车架/车牌号和公里数必填',
          position: 'bottom-right',
          type: 'warning'
        })
        return
      }
      self.$confirm('是否确定保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ajaxData = {}
        ajaxData = { ...self.inspectForm }
        ajaxData.validateImages = self.validateImages
        ajaxData.orderId = self.data.orderId
        api.verify(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
            self.inspectForm = {
              specification: undefined,
              towHook: undefined,
              ashtray: undefined,
              toolkit: undefined,
              antenna: undefined,
              key: undefined,
              warningSign: undefined,
              licensePlateFrame: undefined,
              aidPacket: undefined,
              footPad: undefined,
              airPump: undefined,
              cigarLighter: undefined,
              spareTire: undefined,
              jack: undefined,
              bellCover: undefined
            }
            self.validateImages = []
            self.isInspect = false
          } else {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })
    },
    //签收保存
    inWarehouse () {
      let self = this
    /*   if (self.signForm.needMoreTransport == null || self.signForm.needMoreTransport == '') {
        self.$notify({
          title: '保存',
          message: '请选择签收类型',
          position: 'bottom-right',
          type: 'warning'
        })
        return
      } */
      self.$confirm('是否确定保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ajaxData = {}
        ajaxData = { ...self.signForm }
        api.inWarehouse(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
            self.signForm = {
              needMoreTransport: null,
              orderId: null,
              remark: null,
              transportId: null,
            }
            self.isInspect = false
          } else {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })
    },
    //交付保存
    deliverSave (clientSn) {
      let self = this
      console.log(clientSn)
      if (!clientSn) {
        if (Number(self.deliverForm.deliveryPayFee) > 0) {
          if (self.deliverForm.type == null || self.deliverForm.type == '') {
            self.$notify({
              title: '保存',
              message: '请选择支付方式',
              position: 'bottom-right',
              type: 'warning'
            })
            return
          }
          if (self.deliverForm.type == 3) {
            if (self.deliverForm.cashFee == null || self.deliverForm.cashFee == '') {
              self.$notify({
                title: '保存',
                message: '请输入支付金额',
                position: 'bottom-right',
                type: 'warning'
              })
              return
            }
          }
        }
      }
      self.$confirm('是否确定保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ajaxData = { ...self.deliverForm }
        self.deliverTableData.forEach(d => {
          ajaxData.orderIdList.push(d.orderId)
        })
        if (clientSn) {
          ajaxData.clientSn = clientSn
        } else {
          ajaxData.clientSn = null
        }

        api.deliverSave(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
            self.deliverForm = {
              cashFee: undefined,//现金值
              deliveryPayFee: undefined,
              consigneeName: null,
              consigneePhone: null,
              type: null,
              remark: null,
              clientSn: null,
              orderIdList: [],
              takeCarImageList: [], //交付凭证图
              paymentImageList: [],//支付凭证图
            }
          } else {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })

    },
    // 生成送车单
    generateDeliveryNote(){
      let self = this
      let ids = []
      self.bottomTableData.forEach(d => {
        ids.push(d.orderId)
      })
      api.generateDeliveryNote({ orderIdList: ids }).then(res => {
        if (res.code == 0) {
          self.$confirm('是否查看送车单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            window.open(res.data)
          }).catch(() => {

          })
        } else {
          self.$notify({
            title: '生成送车单',
            message: res.msg,
            position: 'bottom-right',
            type: 'error'
          })
        }
      })
    },
    //生成交付单
    deliveryOrder () {
      let self = this
      let ids = []
      self.deliverTableData.forEach(d => {
        ids.push(d.orderId)
      })
      api.deliveryOrder({ orderIdList: ids }).then(res => {
        if (res.code == 0) {
          self.$confirm('是否查看交付单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            window.open(res.data)
          }).catch(() => {

          })
        } else {
          self.$notify({
            title: '生成交付单',
            message: res.msg,
            position: 'bottom-right',
            type: 'error'
          })
        }
      })
    },
    //额外费用
    addFee: function () {
      let self = this
      self.dialogVisible = true
    },
    //新增
    addFeeList: function () {
      let self = this
      self.$refs.outlayManage.addDriver()
    },
    //新增结算人
    addSettlerList: function () {
      let self = this
      self.$refs.settlerManage.addDriver()
    },
    //新增司机
    addDriverList: function () {
      let self = this
      self.$refs.driverManage.addDriver()
    },
    //显示结算人窗口
    showGetList: function () {
      let self = this
      self.dialogSettlerVisible = true
    },
    //显示司机窗口
    showDriverList: function () {
      let self = this
      if (self.saveForm.companyId == null || self.saveForm.companyId == '') {
        self.$notify({
          title: '司机信息',
          message: '请先选择公司信息',
          position: 'bottom-right',
          type: 'warning'
        })
        return
      }
      self.dialogDriverVisible = true
    }
  }

}
</script>

<style lang="scss" scoped>
.page-table {
  display: flex;
  flex: 1;
  flex-direction: column;

  .showMake {
    background: rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .box-style {
    display: flex;
    flex: 1;
    border: 1px solid #e3e3e3;
    flex-direction: column;
  }

  .top {
    display: flex;
    flex: 1;
    border-bottom: 1px solid #4da7fa;
    flex-direction: column;

    &:after {
      content: '';
      display: block;
      height: 4px;
      background: #4da7fa;
      opacity: 0.2;
    }

    .table-wrapper {
      flex: 1;
    }

    .table {
      flex: 1;
    }
  }

  .bottom {
    //display: flex;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
    height: 36vh;
    width: 99vw;
    //flex-direction: column;

    .title-bar {
      display: flex;
      line-height: 36px;
      background: #f5f5f5;
      border-bottom: 1px solid #e3e3e3;
      padding-left: 10px;
      flex-shrink: 0;

      .op {
        margin-left: auto;
        margin-right: 12px;
      }
    }

    .content {
      display: flex;
      flex: 1;
      overflow: hidden;

      .left {
        display: flex;

        &:after {
          content: '';
          display: block;
          width: 3px;
          background: #4da7fa;
          opacity: 0.2;
        }
      }

      .middle {
        display: flex;
      }

      .right {
        flex: 1;
        overflow: hidden;

        .table-wrapper {
          height: 100%;
        }
      }

      .form-wrapper {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 18vw;

        h3 {
          height: 35px;
          box-sizing: border-box;
        }

        .form-content {
          padding: 10px 10px 0 10px;
          box-sizing: border-box;
          overflow-y: auto;

          .el-form-item {
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  .bottom {
    & > .title-bar {
      padding-left: 16px;
      border-bottom: 1px solid #bdd0e3;
      background: #f5f5f5;
      align-items: center;
    }

    h2 {
      font-size: 12px;
    }

    h3 {
      padding-left: 10px;
      border-bottom: 1px solid #e3e3e3;
      background: #f5f5f5;
      line-height: 30px;
      font-size: 12px;
    }

    //.left h3 { border-right: 1px solid #e3e3e3; }
    //.middle h3 { border-left: 1px solid #e3e3e3; }
    .right {
      border-left: 1px solid #e3e3e3;
    }
  }
}
</style>